<template>
  <div class="vpt-base-moniter-wrapper">
    <section class="vpt-base-content">
      <div class="vpt-content-top">
        <gridFilter
          :title="baseData.entityParameter.title"
          :vptGridStyle="vptGridStyle001"
        >
          <vptBaseTemplate1006
            :listLeft="baseData.entityParameter.list1"
            :listRight="baseData.entityParameter.list2"
            height="1.32rem"
            :leftStyle="{
              width: '1.8rem',
              padding: '0.1rem 0.12rem',
              marginRight: '0.5rem',
            }"
            :btnStyle="{ right: '0', top: '-0.2rem' }"
          ></vptBaseTemplate1006
        ></gridFilter>
      </div>

      <div class="vpt-content-center">
        <gridFilter
          :title="baseData.mainframes.title"
          :vptGridStyle="vptGridStyle002"
        >
          <vptBaseTemplate1007 :list="baseData.mainframes.list">
          </vptBaseTemplate1007>
        </gridFilter>
      </div>

      <div class="vpt-content-bottom">
        <gridFilter
          :title="baseData.entityCPU.title"
          :headerStyle="headerStyle"
          :vptGridStyle="vptGridStyle"
        >
          <vptBaseTemplate1005
            type="1"
            :entity="baseData.entityCPU"
            :availabilityStyle="availabilityStyle"
            meanValueText="近三月平均"
            peakValueText="近三月峰值"
            height="1.32rem"
          ></vptBaseTemplate1005>
        </gridFilter>
        <gridFilter
          :title="baseData.entityMemory.title"
          :headerStyle="headerStyle"
          :vptGridStyle="vptGridStyle"
        >
          <vptBaseTemplate1005
            type="1"
            :entity="baseData.entityMemory"
            :availabilityStyle="availabilityStyle"
            meanValueText="近三月平均"
            peakValueText="近三月峰值"
            height="1.32rem"
          ></vptBaseTemplate1005>
        </gridFilter>
        <gridFilter
          :title="baseData.entitySpace.title"
          :headerStyle="headerStyle"
          :vptGridStyle="vptGridStyle"
        >
          <vptBaseTemplate1005
            type="1"
            :entity="baseData.entitySpace"
            :availabilityStyle="availabilityStyle"
            height="1.32rem"
          ></vptBaseTemplate1005>
        </gridFilter>
      </div>
    </section>
  </div>
</template>

<script setup>
import { computed } from "vue";
import gridFilter from "@/components/grid-filter/index.vue";
import vptBaseTemplate1005 from "@/components/vpt-base-template-1005/index.vue";
import vptBaseTemplate1006 from "@/components/vpt-base-template-1006/index.vue";
import vptBaseTemplate1007 from "@/components/vpt-base-template-1007/index.vue";
import { addThousandsSeparator } from "@/utils/formatter.js";
import { h } from "vue";
const contentStyle = {
  paddingTop: "0.14rem",
};

const vptGridStyle001 = {
  marginLeft: "0rem",
  marginRight: "0.2rem",
  marginBottom: "0.16rem",
  width: "100%",
  height: "2.18rem",
  fontSize: "0.2rem",
  padding: "0.16rem 0.12rem",
};

const vptGridStyle002 = {
  marginLeft: "0rem",
  marginRight: "0.2rem",
  marginBottom: "0.16rem",
  width: "100%",
  height: "1.13rem",
  fontSize: "0.2rem",
  padding: "0.16rem 0.12rem",
};

const vptGridStyle = {
  marginRight: "0.2rem",
  marginBottom: "0.16rem",
  width: "1.6rem",
  height: "3.22rem",
  fontSize: "0.16rem",
  padding: "0.16rem 0",
};

const headerStyle = {
  padding: "0 0.12rem",
};
const leftStyle = {
  width: "1.24rem",
  // height: "1.54rem",
};
const rightStyle = {
  marginLeft: "0.38rem",
};

const btnStyle = {
  right: "0.3rem",
};

const availabilityStyle = {
  width: "1.3rem",
  // height: "0.72rem",
  marginTop: "0.16rem",
  padding: "0.12rem",
  fontSize: "0.14rem",
};

const props = defineProps({
  cpu_info: { type: Object, default: () => ({}) },
  disk_info: { type: Object, default: () => ({}) },
  stream_info: { type: Object, default: () => ({}) },
  mem_info: { type: Object, default: () => ({}) },
  io_info: { type: Object, default: () => ({}) },
  deviceNum: { type: Object, default: () => ({}) },
});

const baseData = computed(() => {
  return {
    entityParameter: {
      title: "国产设备情况",
      list1: [
        {
          label: "国产服务器",
          value: props.deviceNum.equipment_num,
          unit: "台",
        },
        {
          label: "存储量",
          value: props.deviceNum.capacity,
          unit: "TB",
        },
      ],
      list2: [
        {
          label: "CPU",
          value: props.deviceNum.cpu,
          unit: "",
        },
        // {
        //   label: "服务器",
        //   value: props.deviceNum.server,
        //   unit: "",
        // },
        {
          label: "数据库",
          value: props.deviceNum.database,
          unit: "",
        },
      ],
    },
    mainframes: {
      title: "主机",
      list: [
        {
          label: "裸金属",
          value: props.deviceNum.mac_num,
          unit: "台",
        },
        {
          label: "虚拟机",
          value: props.deviceNum.virtual_num,
          unit: "台",
        },
        {
          label: "微服务集群",
          value: props.deviceNum.jq_num,
          unit: "个",
        },
        {
          label: "容器节点",
          value: props.deviceNum.con_num,
          unit: "个",
        },
      ],
    },
    entityCPU: {
      title: "CPU",
      name: "总使用率",
      centerFontColor:
        props.cpu_info.cpu_usage >= 80
          ? "#f53f3f"
          : props.cpu_info.cpu_usage >= 50
          ? "#fabf01"
          : "#00B675",
      percentageValue: props.cpu_info.cpu_usage,
      percentageDrag: 100 - Number(props.cpu_info.cpu_usage || 0),
      usage_year: props.cpu_info.cpu_usage_year,
      usage_max: props.cpu_info.cpu_usage_max,
      //第一个颜色占用率
      percentageColor: [
        props.cpu_info.cpu_usage >= 80
          ? "#f53f3f"
          : props.cpu_info.cpu_usage >= 50
          ? "#fabf01"
          : "#00B675",
        "#1e3651",
      ],
      list: [
        {
          label: "总核数",
          value: addThousandsSeparator(props.cpu_info.vcpu_total),
          unit: "核",
        },
        {
          label: "占用核数",
          value: addThousandsSeparator(props.cpu_info.cpu_used),
          unit: "核",
        },
      ],
    },
    entityMemory: {
      title: "内存",
      name: "总使用率",
      centerFontColor:
        props.mem_info.memory_usage >= 80
          ? "#f53f3f"
          : props.mem_info.memory_usage >= 50
          ? "#fabf01"
          : "#00B675",

      percentageValue: props.mem_info.memory_usage,
      percentageDrag: 100 - Number(props.mem_info.memory_usage || 0),
      usage_year: props.mem_info.memory_usage_year,
      usage_max: props.mem_info.memory_usage_max,
      percentageColor: [
        props.mem_info.memory_usage >= 80
          ? "#f53f3f"
          : props.mem_info.memory_usage >= 50
          ? "#fabf01"
          : "#00B675",
        "#1e3651",
      ],
      list: [
        {
          label: "总内存",
          value: addThousandsSeparator(props.mem_info.memory_total),
          unit: "GB",
        },
        {
          label: "已使用",
          value: addThousandsSeparator(props.mem_info.memory_used),
          unit: "GB",
        },
      ],
    },
    entitySpace: {
      title: "储存资源",
      name: "总使用率",
      centerFontColor:
        props.disk_info.disk_used_percent >= 80
          ? "#f53f3f"
          : props.disk_info.disk_used_percent >= 50
          ? "#fabf01"
          : "#00B675",
      percentageValue: props.disk_info.disk_used_percent,
      percentageDrag: 100 - Number(props.disk_info.disk_used_percent || 0),
      usage_year: props.disk_info.disk_used_percent_year,
      usage_max: props.disk_info.disk_used_percent_max,
      percentageColor: [
        props.disk_info.disk_used_percent >= 80
          ? "#f53f3f"
          : props.disk_info.disk_used_percent >= 50
          ? "#fabf01"
          : "#00B675",
        "#1e3651",
      ],
      list: [
        {
          label: "存储容量",
          value: addThousandsSeparator(props.disk_info.disk_total),
          unit: "TB",
        },
        {
          label: "已使用",
          value: addThousandsSeparator(props.disk_info.disk_used),
          unit: "TB",
        },
      ],
    },
    entityDisk: {
      title: "磁盘 I/O",
      list: [
        {
          label: "R/s",
          value: addThousandsSeparator(props.io_info.io_read),
          unit: "KB/s",
        },
        {
          label: "W/s",
          value: addThousandsSeparator(props.io_info.io_write),
          unit: "KB/s",
        },
      ],
    },
    entityNetWork: {
      title: "网络流量",
      list: [
        {
          label: "下行",
          value: addThousandsSeparator(props.stream_info.down_stream),
          unit: "KB/s",
        },
        {
          label: "上行",
          value: addThousandsSeparator(props.stream_info.up_stream),
          unit: "KB/s",
        },
      ],
    },
    averageTime: {
      title: "平均响应时间",
      list: [
        {
          label: "下行",
          value: addThousandsSeparator(props.stream_info.down_stream),
          unit: "KB/s",
        },
        {
          label: "上行",
          value: addThousandsSeparator(props.stream_info.up_stream),
          unit: "KB/s",
        },
      ],
    },
  };
});
</script>
<style lang="less" scoped>
.vpt-base-moniter-wrapper {
  .vpt-base-content {
    // display: flex;
    align-items: center;
    width: 100%;
    .vpt-content-top {
    }

    .vpt-content-center {
    }

    .vpt-content-bottom {
      display: flex;
      align-items: center;
      // &:first-child()
      &:last-child(.vpt-grid-filter) {
        margin-right: 0;
      }

      //   margin-left: 0.22rem;
    }
    // .vpt-content-right {
    //   width: 70%;
    //   display: flex;
    //   align-items: center;
    //   margin-left: 0.22rem;
    // }
    .vpt-grid-filter {
      flex: 1;
      width: 0;
      padding: 0.25rem 0.16rem;
      box-sizing: border-box;
    }
  }

  .vpt-base-bottom {
  }
}
</style>